<template>
    <div class='avatar-pic' :class="[round?'avatar-round':'']">
        <img class="image" :src="image"/>
    </div>
</template>

<script>
export default {
    name: '',
    data() { 
        return {

        }
    },
    props: {
        src:{
            type:String,
            default:""
        },
        round:{
            type:Boolean,
            default:true
        }
    },
    computed:{
        image(){
            let src = require("@/assets/images/default-photo.png");
            if(this.src){
                src = this.src;
            }
            return src;
        }
    },
    components:{
    },
    mounted() {

    },
    methods:{

    },
}
</script>

<style lang='scss' scoped>
.avatar-pic{
    border:3px solid #fff;
    box-shadow: 0px 0px 0.2rem 0px rgba(0, 0, 0, 0.1);
    background-color:#fff;
    .image{
        display:block;
        width:100%;
        height:100%;
        object-fit: cover;
    }
}
.avatar-round{
    border-radius: 100%;
    .image{
        border-radius: 100%;
    }
}
</style>